<template>
	<view class="fullscreen-container">
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2beijing4.png'" mode="" class="fullscreen-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2biaoti3.png'" mode="" class="toubu-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2juese2.png'" mode="" class="baibian-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2fanhui.png'" mode="" class="fanhui" @click="fanhui"></image>
		<view class="duihuakuang">
			<p class="neir-ziti">对头! 陆路也是四通八达，水陆联运，灵活多变。这就是咱们靖港人的智慧，无论风急浪高，还是路远马亡。总能找到最便捷的路子。</p>
		</view>
		<view class="cxkuang">
			<p class="cx">李伯</p>
		</view>
	</view>
</template>

<script>
		 import MusicContror from '../../../common/teding.vue'
		import { playBackgroundMusic, pauseBackgroundMusic, pageSpecificMusicManager, isGlobalMusicPlaying, isPageSpecificMusicPaused } from '../../../common/audio';
	export default {
		components: {
		   MusicContror,
		 },
		data(){
			return{
			passedParam4: '',
			imageUrl: this.$imageUrl,
			}
		},
	onLoad(options) {
	    // 在这里接收传递过来的参数
	    const passedParam = options.fromPage;
	    console.log('接收到的参数：', passedParam);
	    if (passedParam) {
	        this.passedParam4 = passedParam;
			console.log('passedParam4',this.passedParam4);
	    } else {
	        console.log('接收到的参数为空，未进行赋值。');
	    }
	},
	onShow() {
			    // 根据全局变量判断是否播放特定页面音乐
			    if (!isPageSpecificMusicPaused) {
			      pageSpecificMusicManager.playPageSpecificMusic();
			    }
			  },
			  onHide() {
			    // 暂停特定页面音乐并更新全局变量
			    pageSpecificMusicManager.pausePageSpecificMusic();
			    isPageSpecificMusicPaused = true;
			  },
	  methods: {
	    handleClick() {
	      wx.navigateTo({
	        url: '#',
	      });
	    }
		,
		fanhui() {
				console.log('触发了')
				if (this.passedParam4) {
					console.log('特定跳转')
				    wx.redirectTo({
				        url: `/${this.passedParam4}`
				    });
				} else {
				console.log('默认跳转')
		      wx.redirectTo({
		        url: '/pagesNew/pages-exploration-discovery/index',
		      });
			}
			  pageSpecificMusicManager.pausePageSpecificMusic();
		      // 检查全局音乐是否在播放，如果没有则播放全局音乐
		      if (!isGlobalMusicPlaying) {
		        playBackgroundMusic();
		      }
		    },
	  }
	};
</script>

<style>
	.cx{
		background: -webkit-linear-gradient(#f7edc4, #ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 17px;
	}
	.fanhui{
			   width: 25px;
			    height: 25px;
			   position: absolute;
			   /* transform: rotate(90deg); */
			   /* border: 2px solid pink; */
			   top: 25px; /* 根据需要调整距离第一个图片顶部的距离 */
			   left: 25px; /* 根据需要调整距离第一个图片左侧的距离 */
	}
	
	.fullscreen-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fullscreen-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* border: 2px solid blue; */
			/* transform: scale(2.2); */
		}

	.toubu-image {
						width: 16vw;
						height: 10vh;
					position: absolute;
					/* border: 2px solid blue; */
					/* transform: rotate(90deg) scale(2.2); */
					top: 0px;
					/* 根据需要调整距离第一个图片顶部的距离 */
					left: 42vw;
					/* 根据需要调整距离第一个图片左侧的距离 */
				}


	.baibian-image {
				width: 31vw;
				height: 90vh;
				position: absolute;
				/* transform: rotate(90deg); */
				/* bottom: 520px; */
				/* 根据需要调整距离第一个图片顶部的距离 */
				top: 50px;
				left: 0.9vw;
			}

	.duihuakuang {
					width: 100vw;
					height: 30vh;
					position: absolute;
					/* border: 2px solid pink; */
					background-color: rgba(0, 0, 0, 0.4);
					top: 71vh;
					left: 0px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					padding-left: 10px;
				}

	.neir-ziti {
				width: 1700rpx;
				height: 160rpx;
				/* border: 2px solid pink; */
				opacity: 0;
				position: relative;
				/* left: -100%; */
				top: 1px;
					margin-left: 5.5vw;
				animation: fadeInLeft 2s ease-in-out forwards;
				background: -webkit-linear-gradient(#f7edc4, #ffffff);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
				font-size: 17px;
				/* transform: rotate(90deg); */
			}
		
			@keyframes fadeInLeft {
						from {
							opacity: 0;
							top: 1px;
						}
				
						to {
							opacity: 1;
							top: -3px;
						}
					}

	.cxkuang {
					width: 80px;
					height: 25px;
					position: absolute;
					/* border: 2px solid pink; */
					background-color: rgba(0, 0, 0, 0.5);
						top: 64vh;
						left: 6vw;
					/* transform: rotate(90deg); */
					
					text-align: center;
					
					}
</style>